<template>
  <!-- blur，表单元素的失去焦点事件 -->
  <input
    :value="value"
    class="hm-input"
    @blur="blurFn"
    @input="inputFn"
    :[attr]="{ success: isOk, err: !isOk }"
  />
</template>
<script>
export default {
  props: {
    value: String, // 传入的value为字符串
    reg: {
      type: RegExp, // 传入的reg为正则表达式
      default: () => {
        return /^.{1,}/;
      },
    },
  },
  data() {
    return {
      isOk: true,
      attr: "",
    };
  },
  created() {
    if (this.reg.test(this.value)) {
      // 校验成功
      this.isOk = true;
    } else {
      // 校验失败
      this.isOk = false;
    }
  },
  methods: {
    // 输入框失去焦点时触发，设置字体颜色等
    blurFn() {
      // 设置attr值为class
      this.attr = "class";
      // console.log("User", this.value);
      // let reg = /^1[3|4|5|6|7|8|9]\d{9}$/;
      // 正则表达式提供了一个test方法，
      // test方法可以传入一个参数，这个参数就是你需要校验的变量
      // test方法返回true的时候，表示校验通过，否则校验不通过。
      // console.log("User", reg.test(this.value));
      // 把原来的reg改为this.reg
      if (this.reg.test(this.value)) {
        // 校验成功
        this.isOk = true;
      } else {
        // 校验失败
        this.isOk = false;
        // 请提示组件的使用
        this.$toast.fail("输入内容不合法！");
      }
    },
    // 绑定输入框的input事件，实时传输入框的内容给父组件
    inputFn(event) {
      // console.log("User", "用户输入的最新内容", event.target.value);
      // 子传父，把自定义事件名设置为input
      this.$emit("input", event.target.value);
    },
  },
};
</script>
<style lang="less" scoped>
.hm-input {
  color: #666;
  border: none;
  border-bottom: 1px solid #666;
  width: 100%;
  padding: 10px 0;
  line-height: 35px;
}
// 失败的颜色
.err {
  color: red;
  border-bottom-color: red;
}
// 成功的颜色
.success {
  color: green;
  border-bottom-color: green;
}
</style>